<template>
  <el-drawer
    size="800px"
    v-bind="$attrs"
    v-on="$listeners"
    @close="handleClose"
  >
    <template #title>
      <span>
        <span style="font-size: 20px; font-weight: 700">{{ ticketTitle }}</span>
      </span></template
    >
    <el-card>
      <el-form
        :model="dataForm"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item :label="$t('ticket.describe')" prop="content">
          <template #label>
            <span>
              <span style="font-size: 15px; font-weight: 700">{{
                $t('ticket.describe')
              }}</span>
            </span></template
          >
          <p v-html="ticketContent"></p>
        </el-form-item>
        <el-form-item
          v-if="dataForm.attachments.length !== 0"
          :label="$t('ticket.attachment')"
          prop="attachment"
        >
          <template #label>
            <span>
              <span style="font-size: 15px; font-weight: 700">{{
                $t('ticket.attachment')
              }}</span>
            </span></template
          >
          <span
            v-for="(attachment, index) in dataForm.attachments"
            :key="index"
          >
            <div style="padding-left: 20px">
              <el-link type="primary" :href="attachment.downloadUrl">{{
                attachment.fileName
              }}</el-link>
            </div>
          </span>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="block" style="margin-top: 10px">
      <el-timeline>
        <el-timeline-item v-if="dataForm.evaluateRate">
          <el-card>
            <el-rate v-model="dataForm.evaluateRate" disabled :colors="colors">
            </el-rate>
            <p style="margin-top: 15px" v-html="dataForm.evaluateContent"></p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          placement="top"
          v-for="(ticket, index) in ticketList"
          :key="index"
        >
          <el-card>
            <p v-html="ticket.comment"></p>
            <p class="mt-2">
              {{ ticket.user }}: {{ dateTimeFilter(ticket.creTimeStamp)  }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-drawer>
</template>

<script>
import { timeFilter, dateTimeFilter } from '@/filters'
import { getTicketDetail } from '@/api/ticket'
import { HTMLDecode } from '@/utils'
export default {
  components: {},
  data() {
    return {
      submitLoading: false,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      fileList: [],
      ticketTitle: '',
      rawHtml: '<span style="color: red">This should be red.</span>',
      ticketContent: '',
      dataForm: {
        ticketId: '',
        comment: '',
        status: '',
        attachments: [],
        evaluateRate: '',
        evaluateContent: ''
      },
      ticketList: []
    }
  },
  methods: {
    timeFilter,
    dateTimeFilter,
    init(ticket) {
      if (ticket) {
        this.dataForm.ticketId = ticket.ticketId
        this.dataForm.status = ticket.status
        this.dataForm.evaluateRate = ticket.evaluateRate
        this.dataForm.evaluateContent = HTMLDecode(ticket.evaluateContent)
        this.getTicketDetail(ticket.ticketId)
      }
    },
    handleClose() {
      this.$emit('update:model-value', false)
      // this.$emit('refresh')
    },
    getTicketDetail(ticketId) {
      getTicketDetail(ticketId).then((res) => {
        if (res) {
          this.dataForm.status = res.status
          this.dataForm.attachments = res.attachments
          this.ticketTitle = res.title
          this.ticketContent = HTMLDecode(res.content)
          this.ticketList = res.comments
          if (this.ticketList) {
            this.ticketList.forEach((item) => {
              item.comment = HTMLDecode(item.comment)
            })
          }
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
#dataForm >>> .el-form-item__label {
  font-size: 20px;
}
</style>
